/*
 * @Author: Await
 * @Date: 2025-05-06 16:45:35
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 16:45:35
 * @Description: 3D后期处理配置组件
 */
import React from 'react';
import {
    Switch,
    InputNumber,
    Row,
    Col,
    Typography,
    Tooltip,
    Divider,
    Slider,
    Select,
    Card,
    Collapse,
    ColorPicker
} from 'antd';
import { InfoCircleOutlined, AppstoreOutlined } from '@ant-design/icons';
import type { PostProcessConfig } from '../../types/chartTypes';

const { Option } = Select;
const { Panel } = Collapse;

interface PostProcessConfigProps {
    config?: PostProcessConfig;
    onChange: (config: PostProcessConfig) => void;
}

/**
 * 3D后期处理配置组件
 * 
 * 控制3D图表的后期处理效果
 */
const PostProcessConfig: React.FC<PostProcessConfigProps> = ({ config = {}, onChange }) => {
    // 确保有默认值
    const postConfig: PostProcessConfig = {
        ssao: {
            enable: false,
            radius: 2,
            quality: 'medium',
            intensity: 1,
            ...config.ssao
        },
        depthOfField: {
            enable: false,
            focalDistance: 50,
            focalRange: 20,
            blurRadius: 10,
            quality: 'medium',
            ...config.depthOfField
        },
        bloom: {
            enable: false,
            intensity: 0.3,
            threshold: 0.7,
            radius: 1,
            ...config.bloom
        },
        colorCorrection: {
            enable: false,
            exposure: 1,
            brightness: 0,
            contrast: 1,
            saturation: 1,
            gamma: 1,
            ...config.colorCorrection
        },
        ...config
    };

    // 表单项标题组件
    const FormItemLabel = ({ children, tooltip }: { children: React.ReactNode, tooltip?: string }) => (
        <div style={{ marginBottom: 4, display: 'flex', alignItems: 'center' }}>
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                {children}
            </Typography.Text>
            {tooltip && (
                <Tooltip title={tooltip}>
                    <InfoCircleOutlined style={{ marginLeft: 4, fontSize: 12, color: '#999' }} />
                </Tooltip>
            )}
        </div>
    );

    // 处理SSAO配置变更
    const handleSSAOChange = (key: string, value: any) => {
        onChange({
            ...postConfig,
            ssao: {
                ...postConfig.ssao,
                [key]: value
            }
        });
    };

    // 处理景深配置变更
    const handleDOFChange = (key: string, value: any) => {
        onChange({
            ...postConfig,
            depthOfField: {
                ...postConfig.depthOfField,
                [key]: value
            }
        });
    };

    // 处理泛光配置变更
    const handleBloomChange = (key: string, value: any) => {
        onChange({
            ...postConfig,
            bloom: {
                ...postConfig.bloom,
                [key]: value
            }
        });
    };

    // 处理颜色校正配置变更
    const handleColorCorrectionChange = (key: string, value: any) => {
        onChange({
            ...postConfig,
            colorCorrection: {
                ...postConfig.colorCorrection,
                [key]: value
            }
        });
    };

    // 处理抗锯齿配置变更
    const handleAAChange = (key: string, value: any) => {
        onChange({
            ...postConfig,
            antialiasing: {
                ...postConfig.antialiasing,
                [key]: value
            }
        });
    };

    return (
        <div style={{ padding: 12, background: '#fff', borderRadius: 4 }}>
            {/* 效果预览区域 */}
            <div
                style={{
                    marginBottom: 16,
                    padding: 16,
                    border: '1px dashed #d9d9d9',
                    borderRadius: 4,
                    backgroundColor: '#fafafa',
                    position: 'relative',
                    height: 120,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    overflow: 'hidden'
                }}
            >
                {/* 预览效果图 */}
                <div style={{
                    position: 'relative',
                    width: 100,
                    height: 100,
                    backgroundColor: '#e6f7ff',
                    borderRadius: 4,
                    boxShadow: postConfig.ssao?.enable
                        ? `0 2px 10px rgba(0,0,0,${postConfig.ssao.intensity * 0.5 || 0.5})`
                        : 'none',
                    filter: `
                        ${postConfig.bloom?.enable ? `brightness(${1 + (postConfig.bloom.intensity || 0.3) * 0.5})` : ''}
                        ${postConfig.depthOfField?.enable ? 'blur(1px)' : ''}
                        ${postConfig.colorCorrection?.enable ? `
                            contrast(${postConfig.colorCorrection.contrast || 1})
                            brightness(${1 + (postConfig.colorCorrection.brightness || 0)})
                            saturate(${postConfig.colorCorrection.saturation || 1})
                        ` : ''}
                    `
                }}>
                    <div style={{
                        position: 'absolute',
                        top: '50%',
                        left: '50%',
                        transform: 'translate(-50%, -50%)',
                        fontSize: 40,
                        color: '#1890ff'
                    }}>
                        <AppstoreOutlined />
                    </div>
                </div>

                <Typography.Text
                    style={{
                        position: 'absolute',
                        bottom: 8,
                        right: 8,
                        fontSize: 12,
                        color: '#999'
                    }}
                >
                    <AppstoreOutlined style={{ marginRight: 4 }} />
                    效果预览
                </Typography.Text>
            </div>

            <Typography.Title level={5} style={{ margin: 0, marginBottom: 16 }}>
                后期处理效果
                <Tooltip title="控制3D图表的后期处理效果">
                    <InfoCircleOutlined style={{ fontSize: 14, marginLeft: 8 }} />
                </Tooltip>
            </Typography.Title>

            <Collapse defaultActiveKey={['panelSSAO']} ghost>
                <Panel header={<Typography.Text strong>环境光遮蔽 (SSAO)</Typography.Text>} key="panelSSAO">
                    <Row gutter={[16, 16]}>
                        <Col span={12}>
                            <FormItemLabel tooltip="启用环境光遮蔽效果">
                                启用SSAO
                            </FormItemLabel>
                            <Switch
                                checked={postConfig.ssao?.enable}
                                onChange={value => handleSSAOChange('enable', value)}
                                size="small"
                            />
                        </Col>
                        {postConfig.ssao?.enable && (
                            <>
                                <Col span={12}>
                                    <FormItemLabel tooltip="SSAO质量">
                                        质量
                                    </FormItemLabel>
                                    <Select
                                        value={postConfig.ssao?.quality || 'medium'}
                                        onChange={value => handleSSAOChange('quality', value)}
                                        style={{ width: '100%' }}
                                        size="small"
                                    >
                                        <Option value="low">低</Option>
                                        <Option value="medium">中</Option>
                                        <Option value="high">高</Option>
                                        <Option value="ultra">超高</Option>
                                    </Select>
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="SSAO半径 (1-10)">
                                        半径
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.ssao?.radius || 2}
                                        onChange={value => handleSSAOChange('radius', value)}
                                        min={1}
                                        max={10}
                                        step={0.5}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.ssao?.radius || 2}
                                        onChange={value => handleSSAOChange('radius', value)}
                                        min={1}
                                        max={10}
                                        step={0.5}
                                    />
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="SSAO强度 (0-5)">
                                        强度
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.ssao?.intensity || 1}
                                        onChange={value => handleSSAOChange('intensity', value)}
                                        min={0}
                                        max={5}
                                        step={0.1}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.ssao?.intensity || 1}
                                        onChange={value => handleSSAOChange('intensity', value)}
                                        min={0}
                                        max={5}
                                        step={0.1}
                                    />
                                </Col>
                            </>
                        )}
                    </Row>
                </Panel>

                <Panel header={<Typography.Text strong>景深效果 (DOF)</Typography.Text>} key="panelDOF">
                    <Row gutter={[16, 16]}>
                        <Col span={12}>
                            <FormItemLabel tooltip="启用景深效果">
                                启用景深
                            </FormItemLabel>
                            <Switch
                                checked={postConfig.depthOfField?.enable}
                                onChange={value => handleDOFChange('enable', value)}
                                size="small"
                            />
                        </Col>
                        {postConfig.depthOfField?.enable && (
                            <>
                                <Col span={12}>
                                    <FormItemLabel tooltip="景深质量">
                                        质量
                                    </FormItemLabel>
                                    <Select
                                        value={postConfig.depthOfField?.quality || 'medium'}
                                        onChange={value => handleDOFChange('quality', value)}
                                        style={{ width: '100%' }}
                                        size="small"
                                    >
                                        <Option value="low">低</Option>
                                        <Option value="medium">中</Option>
                                        <Option value="high">高</Option>
                                    </Select>
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="焦距 (10-200)">
                                        焦距
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.depthOfField?.focalDistance || 50}
                                        onChange={value => handleDOFChange('focalDistance', value)}
                                        min={10}
                                        max={200}
                                        step={1}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.depthOfField?.focalDistance || 50}
                                        onChange={value => handleDOFChange('focalDistance', value)}
                                        min={10}
                                        max={200}
                                        step={1}
                                    />
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="焦平面范围 (1-50)">
                                        焦平面范围
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.depthOfField?.focalRange || 20}
                                        onChange={value => handleDOFChange('focalRange', value)}
                                        min={1}
                                        max={50}
                                        step={1}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.depthOfField?.focalRange || 20}
                                        onChange={value => handleDOFChange('focalRange', value)}
                                        min={1}
                                        max={50}
                                        step={1}
                                    />
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="模糊半径 (1-20)">
                                        模糊半径
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.depthOfField?.blurRadius || 10}
                                        onChange={value => handleDOFChange('blurRadius', value)}
                                        min={1}
                                        max={20}
                                        step={1}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.depthOfField?.blurRadius || 10}
                                        onChange={value => handleDOFChange('blurRadius', value)}
                                        min={1}
                                        max={20}
                                        step={1}
                                    />
                                </Col>
                            </>
                        )}
                    </Row>
                </Panel>

                <Panel header={<Typography.Text strong>泛光效果 (Bloom)</Typography.Text>} key="panelBloom">
                    <Row gutter={[16, 16]}>
                        <Col span={12}>
                            <FormItemLabel tooltip="启用泛光效果">
                                启用泛光
                            </FormItemLabel>
                            <Switch
                                checked={postConfig.bloom?.enable}
                                onChange={value => handleBloomChange('enable', value)}
                                size="small"
                            />
                        </Col>
                        {postConfig.bloom?.enable && (
                            <>
                                <Col span={12}>
                                    <FormItemLabel tooltip="泛光强度 (0-1)">
                                        强度
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.bloom?.intensity || 0.3}
                                        onChange={value => handleBloomChange('intensity', value)}
                                        min={0}
                                        max={1}
                                        step={0.05}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.bloom?.intensity || 0.3}
                                        onChange={value => handleBloomChange('intensity', value)}
                                        min={0}
                                        max={1}
                                        step={0.05}
                                    />
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="泛光阈值 (0-1)">
                                        阈值
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.bloom?.threshold || 0.7}
                                        onChange={value => handleBloomChange('threshold', value)}
                                        min={0}
                                        max={1}
                                        step={0.05}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.bloom?.threshold || 0.7}
                                        onChange={value => handleBloomChange('threshold', value)}
                                        min={0}
                                        max={1}
                                        step={0.05}
                                    />
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="泛光半径 (0-2)">
                                        半径
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.bloom?.radius || 1}
                                        onChange={value => handleBloomChange('radius', value)}
                                        min={0}
                                        max={2}
                                        step={0.1}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.bloom?.radius || 1}
                                        onChange={value => handleBloomChange('radius', value)}
                                        min={0}
                                        max={2}
                                        step={0.1}
                                    />
                                </Col>
                            </>
                        )}
                    </Row>
                </Panel>

                <Panel header={<Typography.Text strong>颜色校正</Typography.Text>} key="panelColorCorrection">
                    <Row gutter={[16, 16]}>
                        <Col span={12}>
                            <FormItemLabel tooltip="启用颜色校正">
                                启用颜色校正
                            </FormItemLabel>
                            <Switch
                                checked={postConfig.colorCorrection?.enable}
                                onChange={value => handleColorCorrectionChange('enable', value)}
                                size="small"
                            />
                        </Col>
                        {postConfig.colorCorrection?.enable && (
                            <>
                                <Col span={12}>
                                    <FormItemLabel tooltip="曝光度 (0-2)">
                                        曝光度
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.colorCorrection?.exposure || 1}
                                        onChange={value => handleColorCorrectionChange('exposure', value)}
                                        min={0}
                                        max={2}
                                        step={0.1}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.colorCorrection?.exposure || 1}
                                        onChange={value => handleColorCorrectionChange('exposure', value)}
                                        min={0}
                                        max={2}
                                        step={0.1}
                                    />
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="亮度 (-1~1)">
                                        亮度
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.colorCorrection?.brightness || 0}
                                        onChange={value => handleColorCorrectionChange('brightness', value)}
                                        min={-1}
                                        max={1}
                                        step={0.05}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.colorCorrection?.brightness || 0}
                                        onChange={value => handleColorCorrectionChange('brightness', value)}
                                        min={-1}
                                        max={1}
                                        step={0.05}
                                    />
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="对比度 (0-2)">
                                        对比度
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.colorCorrection?.contrast || 1}
                                        onChange={value => handleColorCorrectionChange('contrast', value)}
                                        min={0}
                                        max={2}
                                        step={0.1}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.colorCorrection?.contrast || 1}
                                        onChange={value => handleColorCorrectionChange('contrast', value)}
                                        min={0}
                                        max={2}
                                        step={0.1}
                                    />
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="饱和度 (0-2)">
                                        饱和度
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.colorCorrection?.saturation || 1}
                                        onChange={value => handleColorCorrectionChange('saturation', value)}
                                        min={0}
                                        max={2}
                                        step={0.1}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.colorCorrection?.saturation || 1}
                                        onChange={value => handleColorCorrectionChange('saturation', value)}
                                        min={0}
                                        max={2}
                                        step={0.1}
                                    />
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="伽马值 (0.5-2.5)">
                                        伽马值
                                    </FormItemLabel>
                                    <InputNumber
                                        value={postConfig.colorCorrection?.gamma || 1}
                                        onChange={value => handleColorCorrectionChange('gamma', value)}
                                        min={0.5}
                                        max={2.5}
                                        step={0.1}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                    <Slider
                                        value={postConfig.colorCorrection?.gamma || 1}
                                        onChange={value => handleColorCorrectionChange('gamma', value)}
                                        min={0.5}
                                        max={2.5}
                                        step={0.1}
                                    />
                                </Col>
                            </>
                        )}
                    </Row>
                </Panel>

                <Panel header={<Typography.Text strong>抗锯齿 (AA)</Typography.Text>} key="panelAA">
                    <Row gutter={[16, 16]}>
                        <Col span={12}>
                            <FormItemLabel tooltip="启用抗锯齿">
                                启用抗锯齿
                            </FormItemLabel>
                            <Switch
                                checked={postConfig.antialiasing?.enable}
                                onChange={value => handleAAChange('enable', value)}
                                size="small"
                            />
                        </Col>
                        {postConfig.antialiasing?.enable && (
                            <>
                                <Col span={12}>
                                    <FormItemLabel tooltip="抗锯齿方法">
                                        方法
                                    </FormItemLabel>
                                    <Select
                                        value={postConfig.antialiasing?.method || 'fxaa'}
                                        onChange={value => handleAAChange('method', value)}
                                        style={{ width: '100%' }}
                                        size="small"
                                    >
                                        <Option value="fxaa">FXAA</Option>
                                        <Option value="smaa">SMAA</Option>
                                        <Option value="taa">TAA</Option>
                                    </Select>
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="抗锯齿质量">
                                        质量
                                    </FormItemLabel>
                                    <Select
                                        value={postConfig.antialiasing?.quality || 'medium'}
                                        onChange={value => handleAAChange('quality', value)}
                                        style={{ width: '100%' }}
                                        size="small"
                                    >
                                        <Option value="low">低</Option>
                                        <Option value="medium">中</Option>
                                        <Option value="high">高</Option>
                                    </Select>
                                </Col>
                            </>
                        )}
                    </Row>
                </Panel>
            </Collapse>
        </div>
    );
};

export default PostProcessConfig; 